<!-- 侧边栏双排菜单一级 license by http://eleadmin.com -->
<template>
  <div class="ele-admin-sidebar-nav ele-scrollbar-hide" style="-webkit-app-region:drag;">
    <slot name="top"/>
    <div v-if="isElectron" class="ele-admin-sidebar-nav-menu" style="-webkit-app-region:no-drag;">
      <el-tooltip
        :disabled="!collapse"
        content="消息"
        :class="['ele-admin-sidebar-nav-item', {'active': mainTab === 'chat'}]" style="cursor:pointer;">
        <div @click="changeMainTab('chat')" style="position:relative;">
          <div class="ele-admin-sidebar-nav-icon">
            <i class="my-icon my-icon-community"></i>
          </div>
          <div class="ele-admin-sidebar-nav-title ele-elip">消息</div>
          <div v-if="unreadMsgCount>0" class="badges">{{unreadMsgCount}}</div>
        </div>
      </el-tooltip>
      <el-tooltip
        :disabled="!collapse"
        content="通讯录"
        :class="['ele-admin-sidebar-nav-item', {'active': mainTab === 'contacts'}]" style="cursor:pointer;">
        <div @click="changeMainTab('contacts')">
          <div class="ele-admin-sidebar-nav-icon">
            <i class="my-icon my-icon-addressbook"></i>
          </div>
          <div class="ele-admin-sidebar-nav-title ele-elip">通讯录</div>
        </div>
      </el-tooltip>
      <el-tooltip
        :disabled="!collapse"
        content="工作台"
        :class="['ele-admin-sidebar-nav-item', {'active': mainTab === 'dashboard'}]" style="cursor:pointer;">
        <div @click="changeMainTab('dashboard')">
          <div class="ele-admin-sidebar-nav-icon">
            <i class="my-icon my-icon-apps"></i>
          </div>
          <div class="ele-admin-sidebar-nav-title ele-elip">工作台</div>
        </div>
      </el-tooltip>
    </div>
    <div v-else class="ele-admin-sidebar-nav-menu" style="-webkit-app-region:no-drag;">
      <el-tooltip
        :disabled="!collapse"
        content="工作台"
        :class="['ele-admin-sidebar-nav-item', {'active': mainTab === 'dashboard'}]" style="cursor:pointer;">
        <div @click="changeMainTab('dashboard')">
          <div class="ele-admin-sidebar-nav-icon">
            <i class="my-icon my-icon-apps"></i>
          </div>
          <div class="ele-admin-sidebar-nav-title ele-elip">工作台</div>
        </div>
      </el-tooltip>
      <el-tooltip
        :disabled="!collapse"
        content="消息"
        :class="['ele-admin-sidebar-nav-item', {'active': mainTab === 'chat'}]" style="cursor:pointer;">
        <div @click="changeMainTab('chat')" style="position:relative;">
          <div class="ele-admin-sidebar-nav-icon">
            <i class="my-icon my-icon-community"></i>
          </div>
          <div class="ele-admin-sidebar-nav-title ele-elip">消息</div>
          <div v-if="unreadMsgCount>0" class="badges">{{unreadMsgCount}}</div>
        </div>
      </el-tooltip>
      <el-tooltip
        :disabled="!collapse"
        content="通讯录"
        :class="['ele-admin-sidebar-nav-item', {'active': mainTab === 'contacts'}]" style="cursor:pointer;">
        <div @click="changeMainTab('contacts')">
          <div class="ele-admin-sidebar-nav-icon">
            <i class="my-icon my-icon-addressbook"></i>
          </div>
          <div class="ele-admin-sidebar-nav-title ele-elip">通讯录</div>
        </div>
      </el-tooltip>
    </div>
    <slot name="bottom"/>
  </div>
</template>

<script>
import util from 'ele-admin/packages/util.js';
import { mapState,mapMutations } from 'vuex';
let me = null;
export default {
  name: 'MySidebarNav',
  props: {
    // 菜单数据
    data: Array,
    // 菜单选中
    active: String,
    // 是否折叠
    collapse: Boolean
  },
  computed: {
    ...mapState({
      mainTab: ({baseModule}) => baseModule.mainTab,
      unreadMsgCount: ({chatModule}) => chatModule.unreadMsgCount
    })
  },
  mounted(){
    me = this;
  },
  methods: {
    ...mapMutations(['baseModule/setMainTab']),
    changeMainTab(tab){
      me['baseModule/setMainTab'](tab);
    }
  }
}
</script>
<style>
.badges{
  color:#ffffff;
  font-size: 11px;
  background:#ff4d4f;
  width:16px;
  height:16px;
  line-height:16px;
  margin-top: 2px;
  text-align: center;
  border-radius: 8px;
  position:absolute;
  right: -4px;
  top: -4px;
}
</style>
